import React, { Component } from 'react';
import Qiniu from 'react-qiniu';
import {SingleInput,QiniuMulti,RadioInput,DateInput} from '../common/Forminput';
import { TitleforOU } from '../common/Forminfo';
import {browserHistory,hashHistory,Link} from 'react-router';
import { connect } from 'react-redux';
import { IssuingUpdate } from '../../Redux/Actions/issuingAction';
import { QiniuUptokenGet } from '../../Redux/Actions/qiniuAction';
import { BankGet } from '../../Redux/Actions/bankAction';
import SweetAlert from 'react-bootstrap-sweetalert';

const history = process.env.NODE_ENV !== 'production' ? browserHistory : hashHistory;

class UpdateIssuing extends Component {
    constructor(props){
        super(props);
        this.state = {
            ...props.issuingReducer.issuing.data,
            profileId:props.issuingReducer.issuing.data.userId,
            issuingId:props.issuingReducer.issuing.data.id,
            alertstate:"tohide"
        }
        this.handleChange = this.handleChange.bind(this);
        this.submitHandler = this.submitHandler.bind(this);
        this.Usemodel = this.Usemodel.bind(this);
    }

    componentWillMount(){
        const token = this.props.authReducer.user.data.token
        this.props.dispatch(QiniuUptokenGet(token));
        this.props.dispatch(BankGet(token,this.props.issuingReducer.issuing.data.bankId))
    }

  submitHandler(event){
    event.preventDefault(); 
    const token = this.props.authReducer.user.data.token;
    let opt =this.state
    for(let i in opt){
        if(opt[i]==null){
            opt[i] = "";
        }
        if(typeof opt[i] == "object"){
            opt[i] = opt[i].join(",")
        }
    }
    this.props.dispatch(IssuingUpdate(token,opt));
    this.setState({
        alertstate:"toshow"
    })
  }


  handleChange(event) {
    const name = event.target.name;
    this.setState({[name]:event.target.value});
  }

  fallbackParent(name,value){
    this.setState({[name]:value});
  }

  backtime(time,name){
    this.setState({
      [name]: time
    })
  }

  Usemodel(event){
    const i = event.target.value;
    const model = this.props.bankReducer.bank.data;
    this.setState({
        bankId: model[i].id,
        account: model[i].account,
        companyPhone: model[i].companyPhone,
        companyAddress: model[i].companyAddress,
        bankAddress: model[i].bankAddress,
        bankInfoUrl: model[i].bankInfoUrl
    })
  }
    getPhotoUrl(name,photoUrl){
        //console.log(name,photoUrl)
        this.setState({
            [name]:photoUrl
        })
    }


    radioHandle(name,value){
        this.setState({
            [name]:value
        })
    }

    render(){
        let livalue = [];
        const token  = this.props.qiniuReducer.qiniu.data?this.props.qiniuReducer.qiniu.data:{token:""};
        const model = this.props.bankReducer.bank.data?this.props.bankReducer.bank.data:"";
        for(var i=0;i<model.length;i++){
            var item = model[i];
            livalue.push(
                <li key={item.id} value={i} onClick={this.Usemodel}>
                    第{i+1}条模板
                </li>
            )
        }

        return(
            <div className="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">			
            <div className="row">
                <ol className="breadcrumb">
                <li><a href="#"><span className="glyphicon glyphicon-home"></span></a></li>
                <li className="active">开证</li>
                </ol>
            </div>
            <div className="row">
                <div className="col-lg-12">
                <div className="panel panel-default">
                    <div className="panel-heading">
                        {this.state.carType} / {this.state.carFrameNo} 开证
                        <Link className="pull-right btn btn-primary" style={{marginTop:"6px"}} to={{pathname:"/main/issuing",state:{profileId:this.state.userId,orderId:this.state.orderId,backurl:this.props.location.state.backurl}}}>详情</Link>
                    </div>
                    <div className="panel-body">
                    <form className="form-horizontal" onSubmit={this.submitHandler}>

                        <SingleInput label="起&nbsp;&nbsp;运&nbsp;&nbsp;港" name="portOfShipment" placeholder="请输入车辆起运地址" value={this.state.portOfShipment} backParent={this.fallbackParent.bind(this)}/>
                        
                        <div className="form-group">
                        <div className="col-sm-8 control-title">
                            <label className="col-sm-4 control-label">国外银行信息
                            </label>
                        </div>
                        </div>
                        <div>
                            <div className="form-group">
                            <label className="col-sm-2 control-label">
                                银行账户
                            </label>
                            <div className="col-sm-6">
                                <input type="text" name="account" placeholder="请输入国外银行账号" className="form-control"  value={this.state.account} onChange={this.handleChange}/>
                            </div>
                            <div className="col-sm-3" style={{position:"absolute",right:"5%"}}>
                                <ul className="info-model">
                                    <li>信息模板</li>
                                    <li><ul id="banklist">{livalue}</ul>
                                    </li>
                                </ul>
                            </div>
                            </div>                        
                            <SingleInput label="公司电话" name="companyPhone" placeholder="请输入贵公司的电话号码" value={this.state.companyPhone} backParent={this.fallbackParent.bind(this)}/>   
                            <SingleInput label="公司地址" name="companyAddress" placeholder="请输入贵公司的地址" value={this.state.companyAddress} backParent={this.fallbackParent.bind(this)}/>                
                            <div className="form-group">
                                <label className="col-sm-2 control-label">
                                    银行地址
                                </label>
                                <div className="col-sm-6">
                                    <input type="text" name="bankAddress" placeholder="请输入银行地址" className="form-control"  value={this.state.bankAddress} onChange={this.handleChange}/>
                                </div>
                            </div>
                            <QiniuMulti src={this.state.bankInfoUrl} label="银行信息" info="请上传银行的信息。(上传照片后，客服会为您录入信息。)" token={token.token} limitNum={1} callbackParent={this.getPhotoUrl.bind(this,"bankInfoUrl")}/>
                        </div>
                        <TitleforOU label="报文／T款回单" />
                        <QiniuMulti src={this.state.messageRecipientUrl} label="报文回单照片" info="请上传报文回单照片。(最多2张。)" token={token.token} limitNum={2} callbackParent={this.getPhotoUrl.bind(this,"messageRecipientUrl")}/>
                        <QiniuMulti src={this.state.TRecipientUrl} label="T款回单照片" info="请上传T款回单照片。(最多2张。)" token={token.token} limitNum={2} callbackParent={this.getPhotoUrl.bind(this,"TRecipientUrl")}/>
                        <TitleforOU label="录号信息" />
                        <SingleInput label="发动机号" name="engineNo" placeholder="请输入发动机型号" value={this.state.engineNo} backParent={this.fallbackParent.bind(this)}/>
                        <SingleInput label="车辆颜色" name="carColor" placeholder="请输入车辆颜色" value={this.state.carColor} backParent={this.fallbackParent.bind(this)}/>
                        <SingleInput label="排&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量" name="deliveryCapacity" placeholder="请输入排量" value={this.state.deliveryCapacity} backParent={this.fallbackParent.bind(this)}/>
                        <SingleInput label="座&nbsp;&nbsp;位&nbsp;&nbsp;数" name="seatNo" placeholder="请输入座位数" value={this.state.seatNo} backParent={this.fallbackParent.bind(this)}/>
                        <RadioInput label="用油类型" radioname="oilType" selected={this.state.oilType} option1="汽油" option2="柴油" backParent={this.radioHandle.bind(this)} />
                        <SingleInput label="轮胎尺寸" name="tireSize" placeholder="请输入轮胎尺寸" value={this.state.tireSize} backParent={this.fallbackParent.bind(this)}/>
                        <QiniuMulti label="车辆照片" src={this.state.carUrl} info={"请上传车辆相关的照片，最多上传9张。"} token={token.token} limitNum={9} callbackParent={this.getPhotoUrl.bind(this,"carUrl")}/>
                        <TitleforOU label="许可证" />
                        <RadioInput label="许可证" radioname="isBonded" selected={this.state.isBonded} option1="保税" option2="不报税" backParent={this.radioHandle.bind(this)} />
                        <TitleforOU label="预计回号日期" />
                        <div style={{marginLeft:"5%"}}>
                            <DateInput label="预计回号日期" name="appointmentMakeInvoiceTime" value={this.state.appointmentMakeInvoiceTime} backParent={this.backtime.bind(this)} tips="请精确到小时" />
                        </div>
                        <TitleforOU label="3C" />
                        <div style={{marginLeft:"5%"}}>
                            <QiniuMulti src={this.state.cccUrl} label="3C照片" info={"请上传3C照片，最多可上传二张照片。"} token={token.token} limitNum={2} callbackParent={this.getPhotoUrl.bind(this,"cccUrl")}/>
                        </div>
                        <TitleforOU label="车辆手续" />
                        <div style={{marginLeft:"5%"}}>
                            <QiniuMulti src={this.state.shutBillUrl} label="关单照片" info={"请上传关单照片，最多可上传一张照片。"} token={token.token} limitNum={1} callbackParent={this.getPhotoUrl.bind(this,"shutBillUrl")}/>
                            <QiniuMulti src={this.state.commodityUrl} label="商检照片" info={"请上传商检照片，最多可上传一张照片。"} token={token.token} limitNum={1} callbackParent={this.getPhotoUrl.bind(this,"commodityUrl")}/>
                            <QiniuMulti src={this.state.uniformityUrl} label="一致性" info={"请上传一致性，最多可上传二张照片。"} token={token.token} limitNum={2} callbackParent={this.getPhotoUrl.bind(this,"uniformityUrl")}/>
                            <QiniuMulti src={this.state.electronicInfoUrl} label="电子信息单" info={"请上传电子信息单，最多可上传一张照片。"} token={token.token} limitNum={1} callbackParent={this.getPhotoUrl.bind(this,"electronicInfoUrl")}/>
                            <QiniuMulti src={this.state.carInvoiceUrl} label="车辆发票" info={"请上传车辆发票，最多可上传一张照片。"} token={token.token} limitNum={1} callbackParent={this.getPhotoUrl.bind(this,"carInvoiceUrl")}/>
                            <QiniuMulti src={this.state.purchaseTaxUrl} label="购置税申请表" info={"请上传购置税申请表，最多可上传一张照片。"} token={token.token} limitNum={1} callbackParent={this.getPhotoUrl.bind(this,"purchaseTaxUrl")}/>
                        </div>
                        <div className="col-sm-8" style={{textAlign: "center"}}>
                        <button type="submit" className="btn btn-primary" style={{marginRight: "15px"}}>
                            确定
                        </button>
                        </div>
                    </form>
                    </div>
                </div>
                <div  id="alertwrap" className={this.state.alertstate}>
                    <SweetAlert
                    info
                    confirmBtnText="确定"
                    confirmBtnBsStyle="primary"
                    title="开证信息已提交。"
                    onConfirm={()=>{this.setState({alertstate:"tohide"});history.push({pathname:"/main/issuing",state:{profileId:this.state.userId,orderId:this.state.orderId,backurl:this.props.location.state.backurl}})}}
                    >
                    </SweetAlert>
                </div>
                </div>
            </div>	
            </div>
        )
    }
}
export default connect((state) => {
    const { authReducer,issuingReducer,qiniuReducer,bankReducer } = state;
    return {
        authReducer,issuingReducer,qiniuReducer,bankReducer
    }
})(UpdateIssuing);